<template>
  <div class="wrap">
    <header>
      <h3>房源管理</h3>
    </header>
    <main>
      <div class="house1">
        <div class="tab">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="销售楼盘" name="first">
              <div class="chose">
                <van-dropdown-menu>
                  <van-dropdown-item
                    v-model="value1"
                    :options="option1"
                    @change="screening1(value1)"
                  />
                  <van-dropdown-item
                    v-model="value2"
                    :options="option2"
                    @change="screening2(value2)"
                  />
                  <van-dropdown-item
                    v-model="value3"
                    :options="option3"
                    @change="screening3(value3)"
                  />
                </van-dropdown-menu>
                <div class="ipt">
                  <input type="text" v-model="val" placeholder="关键字" @input="search" />
                  <button>搜索</button>
                </div>
              </div>
              <div class="list">
                <div>
                  <!-- <button @click="add">添加</button> -->
                    
                </div>
                <tr>
                  <th width="180">序号</th>
                  <th width="210">楼盘名称</th>
                  <th width="230">所属区域</th>
                  <th width="200">价格</th>
                  <th width="230">更新时间</th>
                  <th width="200">排序</th>
                  <th width="200">状态</th>
                  <th width="300">操作</th>
                </tr>
                <table v-for="(item,index) in list" :key="index" style="width: 100% ">
                  <tr>
                    <td width="180">{{item.id}}</td>
                    <td width="210">{{item.type}}</td>
                    <td width="220">{{item.city}}</td>
                    <td width="220">{{item.price}}</td>
                    <td width="210">{{item.date}}</td>
                    <td width="180">{{item.desc}}</td>
                    <td width="260">
                      <el-switch v-model="valuea"></el-switch>
                    </td>
                    <td width="250">
                      <span>户型</span>|
                      <span>相册</span>|
                      <span>动态</span>|
                      <span>沙盘</span>|
                      <span>编辑</span>|
                      <span @click="del(item.id)">删除</span>
                    </td>
                  </tr>
                </table>
              </div>
              <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
            </el-tab-pane>
            <el-tab-pane label="房屋租赁" name="second">
              <div class="chose">
                <van-dropdown-menu>
                  <van-dropdown-item
                    v-model="value1"
                    :options="option1"
                    @change="screening1(value1)"
                  />
                  <van-dropdown-item
                    v-model="value2"
                    :options="option2"
                    @change="screening2(value2)"
                  />
                  <van-dropdown-item
                    v-model="value3"
                    :options="option3"
                    @change="screening3(value3)"
                  />
                </van-dropdown-menu>
                <div class="ipt">
                  <input type="text" v-model="val" placeholder="关键字" @input="search" />
                  <button>搜索</button>
                </div>
              </div>
              <div class="list">
                <tr>
                  <th width="210">序号</th>
                  <th width="210">编号</th>
                  <th width="220">用户名</th>
                  <th width="220">手机号</th>
                  <th width="210">类型</th>
                  <th width="230">支付金额</th>
                  <th width="230">支付时间</th>
                  <th width="210">操作</th>
                </tr>
                <table v-for="(item,index) in list" :key="index" style="width: 100% ">
                  <tr>
                    <td width="210">{{item.id}}</td>
                    <td width="210">{{item.bianhao}}</td>
                    <td width="220">{{item.name}}</td>
                    <td width="220">{{item.phone}}</td>
                    <td width="210">{{item.type}}</td>
                    <td width="230">{{item.num}}</td>
                    <td width="230">{{item.num}}</td>
                    <td width="210">
                      <button @click="del(item.id)">删除</button>
                    </td>
                  </tr>
                </table>
              </div>
              <!-- <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination> -->
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
import debounce from "../utils/debounce";
export default {
  data() {
    return {
      list: [],
      activeName: "first",
      valuea: true,
      value1: "城市",
      option1: [
        { text: "城市", value: "城市" },
        { text: "北京", value: "北京" },
        { text: "杭州", value: "杭州" },
        { text: "安徽", value: "安徽" },
        { text: "吉林", value: "吉林" }
      ],
      value2: "样式",
      option2: [
        { text: "样式", value: "样式" },
        { text: "别墅", value: "别墅" },
        { text: "二手房", value: "二手房" },
        { text: "酒店", value: "酒店" }
      ],
      value3: "排序",
      option3: [
        { text: "排序", value: "排序" },
        { text: "南", value: "南" },
        { text: "北", value: "北" },
        { text: "东", value: "东" },
        { text: "西", value: "西" }
      ],
      show: false,
      flag: true,
      userInfo: {
        title: "",
        city: "",
        price: "",
        id: "",
        date: "",
        num: "",
        desc: ""
      },
      val: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const res = await axios.post("/api/search1", { val: this.val });
      this.list = res.data.data;
      // axios({
      //   url: "/api/getList",
      //   method: "post"
      // }).then(res => {
      //   // console.log(res);
      //   this.list = res.data.data;
      // });
    },
    //tab切换
    handleClick(tab, event) {
      console.log(tab, event);
    },
    del(id) {
      axios({
        url: "/api/delList",
        method: "post",
        data: { id }
      }).then(res => {
        // console.log(res);
        this.getList();
      });
    },
    add() {
      this.show = true;
      this.userInfo.id = Math.random.toString().substr(2, 6);
    },

    no() {
      this.show = false;
      this.clean();
    },

    ok() {
      this.show = false;
      axios({
        url: "/api/addList",
        method: "post",
        data: this.userInfo
      }).then(res => {
        console.log(res);
        this.getList();
      });
      this.clean();
    },

    clean() {
      this.show = false;
      this.userInfo.title = "";
      this.userInfo.name = "";
      this.userInfo.price = "";
    },

    //筛选
    screening1(value) {
      axios({
        url: "/api/screening1",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.getlist();
        } else {
          this.list = res.data.data;
        }
      });
    },

    screening2(value) {
      axios({
        url: "/api/screening2",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.getlist();
        } else {
          this.list = res.data.data;
        }
      });
    },

    screening3(value) {
      axios({
        url: "/api/screening3",
        method: "post",
        data: {
          value: value
        }
      }).then(res => {
        if (res.data.code === 1) {
          //调用函数
          this.getlist();
        } else {
          this.list = res.data.data;
        }
      });
    },

    search() {
      debounce(() => {
        this.getList();
      }, 500);
    }
  }
};
</script>

<style lang='scss' scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // border: 1px solid #999;
}
header {
  height: 30px;
  line-height: 30px;
  color: #999;
}
main {
  .house1 {
    margin-top: 5px;
    .tab {
      .chose {
        width: 300px;
        height: 40px;
        display: flex;
        align-items: center;
        margin: 5px 20px;
        van-dropdown-menu {
          display: flex;
          margin: 0 20px;
        }
        .ipt {
          display: flex;
          align-items: center;
          margin-left: 20px;
          input {
            border-collapse: collapse;
            width: 160px;
            height: 37px;
            border-radius: 3px;
            background: #fff;
            padding-left: 12px;
          }
          button {
            width: 80px;
            height: 37px;
            border: none;
            background: #999;
            font-size: 16px;
            border-radius: 3px;
            margin-left: 8px;
          }
        }
      }
      .list {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 15px;
        .button {
          width: 60px;
          height: 30px;
          padding: 5px;
          border: 1px solid;
          font-size: 16px;
        }
        tr {
          border: 1px solid #ccc;
          line-height: 20px;
          text-align: center;
          align-items: center;
          th {
            line-height: 40px;
            padding: 0 50px;
          }
          td {
            line-height: 30px;
            padding: 0 20px;
          }
        }
      }
    }
  }
}
</style>